<template>
  <a-card>
    <a-form-model :model="formdata" v-bind="layout">
      <a-row>
        <!-- 搜索栏 -->
        <a-col :lg="6" :md="6" :sm="24">
          <a-form-model-item label="库存组织编号">
            <a-select
              v-model="formdata.bodycode"
              @change="UnitNameChange"
              showSearch
            >
              <a-select-option
                v-for="item in UnitList"
                :key="item.id"
                :value="item.bodycode + '|' + item.bodyname"
                >{{ item.bodycode }} {{ item.bodyname }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :lg="6" :md="6" :sm="24">
          <a-form-model-item label="库存组织名称">
            <a-input disabled v-model="formdata.bodyname"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :lg="6" :md="6" :sm="24"> </a-col>
        <a-col :lg="6" :md="6" :sm="24" align="right">
          <a-button type="primary" @click="getsearch"> 查询 </a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
            重置
          </a-button>
        </a-col>
      </a-row>
    </a-form-model>
    <a-form-model :model="formdata" v-bind="layout">
      <a-row>
        <!-- <a-button
          type="primary"
          @click="showModalXinZeng"
          style="margin-bottom: 10px"
        >
          <a-icon type="plus" />
          添加库存组织
        </a-button> -->

        <!-- 新增彈窗开始 -->
        <a-modal
          :visible="visibleXinZeng"
          width="50%"
          title="添加库存组织"
          okText="确定"
          @cancel="handleCancel2"
          @ok="handleOk2"
        >
          <a-form-model
            ref="ruleForm"
            :model="xinzeng_formdata"
            v-bind="layout"
          >
            <a-row>
              <a-col :md="10" :sm="24">
                <a-form-model-item label="库存组织编号">
                  <a-input v-model="xinzeng_formdata.bodycode"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :md="10" :sm="24">
                <a-form-model-item label="库存组织名称">
                  <a-input v-model="xinzeng_formdata.bodyname"></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </a-modal>
        <!-- 新增弹窗结束 -->
      </a-row>
    </a-form-model>

    <!-- 表格 -->
    <a-table
      bordered
      :data-source="dataSource"
      :columns="columns"
      :pagination="pagination"
      @change="handleTableChange"
      id="myTable"
    >
      <template slot="序号" slot-scope="text, record">
        <editable-cell
          :text="text"
          @change="onCellChange(record.key, 'xuhao', $event)"
        />
      </template>
    </a-table>
    <!-- 修改弹窗开始 -->
    <a-modal
      title="修改"
      :visible="visible1"
      width="50%"
      @ok="handleOk1"
      @cancel="handleCancel1"
      cancelText="取消"
      okText="保存"
    >
      <a-form-model ref="ruleForm" :model="xiugai_formdata" v-bind="layout">
        <a-row>
          <a-col :md="10" :sm="24">
            <a-form-model-item label="库存组织编号">
              <a-input v-model="xiugai_formdata.bodycode"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :md="10" :sm="24">
            <a-form-model-item label="库存组织名称">
              <a-input v-model="xiugai_formdata.bodyname"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    <!-- 修改弹窗结束 -->
  </a-card>
</template>
 
<script>
import { KuCunZuZhiGuanLiHttp } from "../../services/modules/JiChuXinXiGuanLi/KuCunZuZhiGuanLi";
const $http = new KuCunZuZhiGuanLiHttp();


export default {
  data() {
    return {
      //===============分页========================
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据
        pageSizeOptions: ["10"], //每页中显示的数据
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
      },
      queryParam: {
        //查询参数
        page: 1, //第几页
        size: 10, //每页中显示数据的条数
        hosName: "",
        hosCode: "",
        province: "",
        city: "",
      },
      //新增弹窗
      visibleXinZeng: false,
      xinzeng_formdata: {
        bodycode: "", //库存编码
        bodyname: "", //库存名称
      },
      //修改弹窗
      visible1: false,
      xiugai_formdata: {
        bodycode: "",
        bodyname: "",
        userId: "",
        id: "",
      },

      formdata: {
        //增加数据
        bodycode: "", //库存编码
        bodyname: "", //名称
        id: "",
      },

      UnitList: [], //库存组织编码
      // 增加栏的格式
      layout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 15 },
      },

      // 表格数据
      dataSource: [],
      count: 2,
      columns: [
        {
          title: "序号",
          key: 1,
          dataIndex: "xuhao",
          align: "center",
        },
        {
          title: "库存组织编号",
          key: 2,
          dataIndex: "bodycode",
          align: "center",
        },
        {
          title: "库存组织名称",
          key: 3,
          dataIndex: "bodyname",
          align: "center",
        },
      ],
    };
  },
  mounted() {
    this.GetInventoryOrganizationList(); //库存组织档案列表
    this.getAllInventoryName();//返回所有库存组织编码和名称
    
  },

  methods: {
    //搜索开始
    getsearch() {
      let dd = (this.pagination.page = 1); //分页
      (this.dataSource = []), (this.pagination.current = 1);
      $http
        .GetInventoryOrganizationList(
          "?pageNo=" + dd + "&bodycode=" + this.formdata.bodycode
        )
        .then((res) => {
          const pagination = { ...this.pagination }; //分页
          this.data = res.result.records;
          pagination.total = res.result.total; //分页
          pagination.pageSize = res.result.size; //分页
          this.pagination = pagination; //分页
          console.log(this.data, "我是用户列表的信息");
          for (let i = 0; i < res.result.records.length; i++) {
            let data = {
              id: res.result.records[i].id,
              xuhao: (res.result.current - 1) * 10 + i + 1,
              bodyname: res.result.records[i].bodyname,
              bodycode: res.result.records[i].bodycode,
            };
            console.log("要获取的数据", data);
            this.dataSource.push(data);
          }
        });
    },
    // 获取库存组织档案列表
    GetInventoryOrganizationList() {
      let dd = this.queryParam.page; //分页
      (this.dataSource = []),
        $http.GetInventoryOrganizationList("?pageNo=" + dd).then((res) => {
          const pagination = { ...this.pagination }; //分页
          pagination.total = res.result.total; //分页
          pagination.pageSize = res.result.size; //分页
          this.pagination = pagination; //分页
          console.log("res----->", res);

          this.dataSource = res.result.records;
             let wowo = res.result.records;
          for(let i = 0;i<wowo.length;i++){
            this.dataSource[i].xuhao = (res.result.current - 1)*10 + i +1;
          }
        });
    },

    handleCancel1() {
      // 修改弹窗取消
      this.visible1 = false;
    },
    //重置
    handleReset() {
      this.formdata = {
        id: "",
        bodyname: "",
        bodycode: "",
        xuhao:"",
      };
      this.pagination = {
        page:1,
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据
        // showSizeChanger: true,
        pageSizeOptions: ["10"], //每页中显示的数据
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
      };
      this.CHONGZHILIEBIAO();
    },

    CHONGZHILIEBIAO(){
    let dd = 1; //分页
      (this.dataSource = []),
        $http.GetInventoryOrganizationList("?pageNo=" + dd).then((res) => {
          const pagination = { ...this.pagination }; //分页
          pagination.total = res.result.total; //分页
          pagination.pageSize = res.result.size; //分页
          this.pagination = pagination; //分页
          console.log("res----->", res);

          this.dataSource = res.result.records;
             let wowo = res.result.records;
          for(let i = 0;i<wowo.length;i++){
            this.dataSource[i].xuhao = (res.result.current - 1)*10 + i +1;
          }
        });
          
    },
    //新增弹窗
    showModalXinZeng() {
      this.visibleXinZeng = true;
    },
    handleCancel2() {
      //新增弹窗
      this.visibleXinZeng = !this.visibleXinZeng;
    },
    showModal1(record) {
      this.depotNo_jiaoyan = record.bodycode;
      console.log(record, "record");
      //修改按钮
      this.visible1 = !this.visible1;
      this.xiugai_formdata.bodycode = record.bodycode; //库存组织编码
      this.xiugai_formdata.bodyname = record.bodyname; //库存组织名称
      this.id = record.id;
      this.userId = record.userId;
    },
    handleOk1() {
      // 修改弹窗ok
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.visible1 = false;
          const data = {
            bodycode: this.xiugai_formdata.bodycode,
            bodyname: this.xiugai_formdata.bodyname,
            id: this.id,
          };
          console.log("data::::::::::", data);
          if (this.depotNo_jiaoyan == this.xiugai_formdata.bodycode) {
            $http.updateInventoryOrganization(data).then((res) => {
              console.log("我进来了");
              if (res.success) {
                this.$message.success("保存成功！");
                this.GetInventoryOrganizationList();
                console.log(res);
              } else {
                this.$message.success("保存失败！");
              }
            });
          }
        }
      });
    },
    handleOk2() {
      let querPath =
        "?fieldName=" +
        "depot_no" +
        "&tableName=" +
        "warehouse_inventory_organization_file" +
        "&fieldVal=" +
        this.xinzeng_formdata.bodycode;
      //点击增加按钮
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.visibleXinZeng = false;
          const data = {
            bodycode: this.xinzeng_formdata.bodycode, //仓库编码
            bodyname: this.xinzeng_formdata.bodyname, //仓库名称
          };
          //重复检验
          $http.duplicateCheck(querPath).then((res) => {
            //如果校验成功就发送数据
            if (res.success) {
              $http.InventoryOrganizationFile(data).then((res) => {
                console.log("我进来了");
                if (res.success) {
                  this.$message.success("保存成功！");
                  this.GetInventoryOrganizationList();
                  console.log(res);
                } else {
                  this.$message.success("保存失败！");
                }
              });
            } else {
              this.$message.error("仓库编码重复！");
            }
          });
        } else {
          console.log("false出现了");
        }
      });
    },


    // ==============分页======================
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.queryParam.page = pagination.current;
      this.queryParam.size = pagination.pageSize;
      this.GetInventoryOrganizationList();
    },

    // 确定删除吗？的触发函数
    onDelete(_id) {
      // console.log(_id, "_id");
      const deletePath = `?id=${_id}`;
      $http
        .deleteInventoryOrganizationInfo(deletePath)
        .then((res) => {
          if (res && res.code === 200) {
            this.$message.success("删除成功");
            this.GetInventoryOrganizationList();
          } else {
            this.$message.error("删除失败");
          }
        })
        .then(() => {
          this.data = [];
        });
    },

    //返回所有的仓库编码、仓库名称
    getAllInventoryName() {
      $http.getAllInventoryName().then((res) => {
        for (let i = 0; i < res.result.length; i++) {
          let data = {
            bodycode: res.result[i].bodycode,
            bodyname: res.result[i].bodyname,
            id: res.result[i].id,
          };
          this.UnitList.push(data);
          // console.log("返回所有的仓库编码、仓库名称", this.WarehouseCodeList);
        }
      });
    },

    // 选择库存组织编码的change触发函数
    UnitNameChange(value, option) {
      this.formdata.id = option.key;
      // console.log(value , option);
      const newValue = value.split("|");
      console.log(newValue);
      this.formdata.bodycode = newValue[0];
      this.formdata.bodyname = newValue[1];
    },
  },
};
</script>